<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">合同详情</block>
		</cu-custom>

		<view class="bg-top bg-blue">
			<view class="top-box shadow">
				<view class="qh-pic cu-avatar xl" style="border-radius:20rpx; background-image:url(https://mini.wm-mis.com/img/static/merchant1.jpeg)"></view>
				<view class="qh-title text-bold text-blue text-xl">
					<text>{{ contractDetail.wvpShop.name ? contractDetail.wvpShop.name : '' }}～</text>
				</view>

				<!-- :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']" -->
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;">
						<view class="content margin-top" style="display: flex; justify-content: flex-start;">
							<text class="cuIcon-locationfill text-red margin-right-xs"></text>
							<text class="text-black text-bold"
								style="min-width: 290rpx; text-align: left;">{{ contractDetail.wvpShop.provinceText ? contractDetail.wvpShop.provinceText : '' }}{{ contractDetail.wvpShop.cityText ? contractDetail.wvpShop.cityText : '' }}{{ contractDetail.wvpShop.cityText ? contractDetail.wvpShop.cityText : '' }}{{ contractDetail.wvpShop.address ? contractDetail.wvpShop.address : '' }}</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-text text-red"></text>
							<text class="text-black">营业执照</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ contractDetail.wvpShop.licenseNumber ? contractDetail.wvpShop.licenseNumber : '' }}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-likefill text-orange"></text>
							<text class="text-black">合同名称</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue.light light">{{ contractDetail.contractName ? contractDetail.contractName : '' }}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-list text-orange"></text>
							<text class="text-black">合同编号</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-orange light">{{ contractDetail.contractCode ? contractDetail.contractCode : '' }}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-taoxiaopu text-olive"></text>
							<text class="text-black">合同类型</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ param.type_dictText }}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-time text-blue  margin-right-xs"></text>
							<text class="text-black">开始时间</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ contractDetail.beginDate }}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-timefill text-blue  margin-right-xs"></text>
							<text class="text-black">结束时间</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ contractDetail.endDate }}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-filter text-brown"></text>
							<text class="text-black">合同状态</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-orange.light light">{{ param.status_dictText }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 按钮 -->
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;">
				<button class="cu-btn bg-blue margin-top-sm lg" style="width: 100%;" @click="submitClick">返回</button>
			</view>
			<u-gap height="20"></u-gap>
		</view>
		
		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	export default {
		data() {
			return {
				param: null,
				loading: false,
				contractDetail: null,
				id: null,
			}
		},
		async onLoad(options){
			this.param = JSON.parse(options.item)
			this.id = this.param.id
			await this.getContractDetail();
		},
		methods: {
			submitClick(){
				uni.navigateBack();
			},
			async getContractDetail(){
				let that = this
				that.loading = true
				let res = await api.contractDetail({
					id: that.id
				})
				if(res.data.code == 200 && res.data.success){
					that.contractDetail = res.data.result
				}
				that.loading = false
			},
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
</style>
